<template>
  <div class="homeContainer">
    <!-- 搜索框 -->
    <SearchContext></SearchContext>
    <div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in bannerList" :key="banner.id"
          ><img
            width="100%"
            height="150px"
            :src="banner.image_url"
            alt=""
        /></van-swipe-item>
      </van-swipe>
      <!-- 导航宫格部分 -->
      <van-grid column-num="5">
        <van-grid-item :icon="nav.icon_url" :text="nav.name" v-for="nav in channelList" :key="nav.id" @click="toCategory(nav)"/>
      </van-grid>
    <van-panel
      title="品牌制造商直供:"
      style="marginTop: 20px; textAlign: center; fontSize: 20px"
    >
      <van-row type="flex" justify="space-between" gutter="10">
        <van-col span="12" v-for="goods in hotGoodsList" :key="goods.id"><img style="width:100%;backgroundColor:#eee"  :src="goods.list_pic_url"></van-col>
      </van-row>
    </van-panel>
  </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Home",
  data() {
    return {};
  },
  mounted() {
    //   初始化数据
    this.getInitData();
    this.$bus.$emit("changeFlag", 0);
  },
  methods: {
    //   派发初始化任务
    getInitData() {
      this.$store.dispatch("getHomeInitData");
    },
    //路由跳转到分类页面
    toCategory(navInfo) {
      this.$router.push({
        name: "classification",
        params: { name: navInfo.name },
      });
      this.$bus.$emit("changeFlag", 2);
    },
  },
  computed: {
    ...mapGetters([
      "bannerList",
      "categoryList",
      "hotGoodsList",
      "channelList",
    ]),
  },
};
</script>

<style>
.home {
  height: 5rem;
}
</style>